<!DOCTYPE html>
<html lang="en">
<head>
    <script src="${request.contextPath}/js/jquery.js"></script>
    <style>
        #order_wrapper {
            width:calc(100% - 64px);
            height:100%;
            padding: 32px;
        }
        #order_table_wrapper {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        .form_input_text {
            width:calc(100% - 16px);
            border:none;
            border-bottom:1px #333 solid;
            margin-top:30px;
            outline:none;
            padding:8px;
            font-size:13px;
            color:#333;
        }
        #admin_update_submit {
            display:block;
            width:20%;
            padding:8px;
            float:right;
            border:none;
            outline:none;
            background-color:#f44336;
            color:#fff;
            font-weight:600;
            font-size:15px;
            border-radius:5px;
            margin-top:10px;
            cursor:pointer;
        }
        #fault_update_form {
            padding: 20px;
            margin-top:50px;
            background:#fff;
            box-shadow: 0 0 10px #757575;
            border-radius:5px;
        }
        #admin_update_submit:hover {
            filter:brightness(110%);
        }
        #admin_table_list {
            width:100%;
            table-layout:fixed
        }
        #admin_table_list td {
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding:10px 0;
            background-color:#ccc;
            font-size:12px;
        }
        .admin_state_radio > span {
            font-size:13px;
            float:right;
            margin:0 15px 0 5px;
        }
        .admin_state_radio > input {
            width:15px;
            height:15px;
            margin:0;
        }
        #order_table_list {
            width:100%;
            table-layout:fixed;
            margin-top:30px;
        }
        #order_table_list td {
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding:10px 0;
            background-color:#ccc;
            font-size:12px;
        }
        #fault_update_submit:hover {
            filter: brightness(110%);
        }
        .fault_state {
            float:left;
            height:15px;
            line-height:15px;
            font-size:12px;
            margin-top: 30px;
        }
        .fault_state > input[type=radio] {
            float:left;
            width:15px;
            height:15px;
        }
        .fault_state > p {
            float:left;
            margin: 0 15px 0 5px;
        }
        .page_button {
            font-size:13px;
            color:#333;
            cursor:pointer;
        }
        .page_button:hover {
            text-decoration: underline;
            font-weight:600;
        }
        #quick_page {
            width:50px;
            border:none;
            border-bottom:1px #333 solid;
            font-size:13px;
            color:#333;
            text-align:center;
            outline:none;
        }
    </style>
</head>
<body>
    <div id="order_wrapper">
        <div class="wrapper_head">
            <h2>订单管理</h2>
        </div>
        <div id="order_table_wrapper">
            <h3>订单查询: </h3>
            <table id="order_table_list">
                <tr id="order_table_head">
                    <td style="width:10%">订单编号</td>
                    <td style="width:5%">用户姓名</td>
                    <td style="width:15%;">故障详情</td>
                    <td style="width:20%">用户地址</td>
                    <td style="width:5%">接单师傅</td>
                    <td style="width:15%">下单时间</td>
                    <td style="width:15%">接单时间</td>
                    <td style="width:15%">完成时间</td>
                    <td style="width:5%">订单状态</td>
                </tr>
            </table>
            <div style="text-align:center">
                <input type="hidden" id="current_page" value="1" />
                <span onclick="page(0)" class="page_button">首页</span>
                <span onclick="page(1)" class="page_button">上一页</span>
                <input type="text" id="quick_page" value="1" onblur="quickPage(this)" /><span id="page_count" style="font-size:13px;color:#333"></span>
                <span onclick="page(2)" class="page_button">下一页</span>
                <span onclick="page(3)" class="page_button">尾页</span>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
</body>
<script>
    var currentPage = 1;
    var pages = 0;
    var type = -1;
    getOrderPage(1);
    function getOrderPage(p) {
        if(p > 0) {
            $.ajax({
                url: "${request.contextPath}/getOrders",
                type: "get",
                async: false,
                data: {page:currentPage, type:"-1"},
                dataType: "text",
                success: function(data) {
                    alert(data);
                    if(data != "") {
                        var json = JSON.parse(data);
                        for(var j in json) {
                            var status = "";
                            if(json[j].status == 0)
                                status = "未接单";
                            else if(json[j].status == 1)
                                status = "已接单";
                            else if(json[j].status == 2)
                                status = "已完成";
                            else
                                status = "已取消";
                            var str = "<tr>" +
                                "<td>"+json[j].number+"</td>" +
                                "<td>"+json[j].name+"</td>" +
                                "<td>"+json[j].content+"</td>" +
                                "<td>"+json[j].addressname+"</td>" +
                                "<td>"+json[j].fettlerName+"</td>" +
                                "<td>"+json[j].time+"</td>" +
                                "<td>"+json[j].taketime+"</td>" +
                                "<td>"+json[j].completetime+"</td>" +
                                "<td>"+status+"</td>" +
                                "</tr>";
                            $(str).appendTo($("#order_table_list"));
                        }
                    }
                },
                error: function(data) {

                }
            })
        }
    }
</script>
</html>